<template>
  <div class="v-header">
    <v-header title="我的订单">
      <span class="back" @click="goBack">
        <i class="el-icon-arrow-left"></i>返回
      </span>
    </v-header>
    <div class="v-main">
      <ul class="dnav g-clearfix">
        <li @click="hoverClick('tab-container1')" v-bind:class="[active=='tab-container1'?'activeli':'']">
          <span>未使用</span>
        </li>
        <li @click="hoverClick('tab-container2')" v-bind:class="[active=='tab-container2'?'activeli':'']">
          <span>已使用</span>
        </li>
        <li @click="hoverClick('tab-container3')" v-bind:class="[active=='tab-container3'?'activeli':'']">
          <span>已退款</span>
        </li>
      </ul>
      <div class="slide_block">
        <mt-tab-container v-model="active">
          <mt-tab-container-item id="tab-container1">
            <div class="erbox" v-if="noUseList.length === 0">没有记录</div>
            <mt-loadmore :top-method="loadTop" ref="loadmore1" style="overflow:visible;">
              <!-- <mt-cell> -->
              <div class="recordlist" :class="{'expOrder':item.status === '6'}" v-for="item in noUseList" :key="item.orderId">
                <div class="dlist">
                  <p>{{item.activityName}}<span class="order_tk" @click="orderTk(item.orderId)">退款</span></p>
                  <table>
                    <tbody>
                      <tr>
                        <td class="td1">下单时间：</td>
                        <td class="td2">{{item.createTime}}</td>
                      </tr>
                      <tr>
                        <td class="td1">有效期至：</td>
                        <td class="td2">{{item.endTime}}</td>
                      </tr>
                      <tr>
                        <td class="td1">电子消费码：</td>
                        <td class="td2" style="word-break:break-all;">{{item.orderId}}</td>
                      </tr>
                    </tbody>
                  </table>
                  <img v-if="item.status === '6'" class="expImg" src="@/assets/images/icon_ygq.png" width="80" alt="已过期">
                </div>
                <div class="tCode" @click="showQode(item.matrix_content)"><img src="@/assets/images/icon_code.png" width="14px" style="display: inline-block;margin-bottom: -2px;" id="orderImg">&nbsp;&nbsp;
                  <span>订单二维码</span>
                </div>
              </div>
              <!-- </mt-cell> -->
            </mt-loadmore>
          </mt-tab-container-item>
          <mt-tab-container-item id="tab-container2">
            <div class="erbox" v-if="usingList.length === 0">没有记录</div>
            <mt-loadmore :top-method="loadTop" ref="loadmore2" style="overflow:visible;">
              <!-- <mt-cell> -->
              <div class="recordlist expOrder" v-for="item in usingList" :key="item.orderId">
                <div class="dlist">
                  <p>{{item.activityName}}</p>
                  <table>
                    <tbody>
                      <tr>
                        <td class="td1">下单时间：</td>
                        <td class="td2">{{item.createTime}}</td>
                      </tr>
                      <tr>
                        <td class="td1">使用时间：</td>
                        <td class="td2">{{item.useTime}}</td>
                      </tr>
                      <tr>
                        <td class="td1">电子消费码：</td>
                        <td class="td2" style="word-break:break-all;">{{item.orderId}}</td>
                      </tr>
                    </tbody>
                  </table>
                </div>
                <div class="tCode"><img src="@/assets/images/icon_code.png" width="14px" style="display: inline-block;margin-bottom: -2px;" id="orderImg">&nbsp;&nbsp;
                  <span>订单二维码</span>
                </div>
              </div>
              <!-- </mt-cell> -->
            </mt-loadmore>
          </mt-tab-container-item>
          <mt-tab-container-item id="tab-container3">
            <div class="erbox" v-if="tkList.length === 0">没有记录</div>
            <mt-loadmore :top-method="loadTop" ref="loadmore3" style="overflow:visible;">
              <!-- <mt-cell> -->
              <div class="recordlist" v-for="item in tkList" :key="item.orderId">
                <div class="dlist">
                  <p>{{item.activityName}}</p>
                  <table>
                    <tbody>
                      <tr>
                        <td class="td1">下单时间：</td>
                        <td class="td2">{{item.createTime}}</td>
                      </tr>
                      <tr>
                        <td class="td1">退款时间：</td>
                        <td class="td2">{{item.endTime}}</td>
                      </tr>
                      <tr>
                        <td class="td1">电子消费码：</td>
                        <td class="td2" style="word-break:break-all;">{{item.orderId}}</td>
                      </tr>
                    </tbody>
                  </table>
                  <img class="expImg" src="@/assets/images/icon_ytk.png" width="80" alt="已退款">
                </div>
                <div class="tCode" @click="showQode(item.matrix_content)"><img src="@/assets/images/icon_code.png" width="14px" style="display: inline-block;margin-bottom: -2px;" id="orderImg">&nbsp;&nbsp;
                  <span>订单二维码</span>
                </div>
              </div>
              <!-- </mt-cell> -->
            </mt-loadmore>
          </mt-tab-container-item>
        </mt-tab-container>
      </div>

    </div>

    <div id="qrcode" ref="qrcode" v-if="!qcodeClose">
      <img src="@/assets/images/btn_close.png" @click="closeQode()" class="close_btn" alt="关闭">
      <!-- <vue-qr :logoSrc="imageUrl02" :text="codeValue" :margin="0" :size="160"></vue-qr> -->
      <qrcode-vue :size="size" :value="value" :logo="logo" :bgColor="bgColor" :fgColor="fgColor"></qrcode-vue>
      <div class="qrcode-tips">*&nbsp;请向店员出示此二维码享受服务</div>
    </div>
    <div class="qrcode_bg" @click="closeQode()" v-if="!qcodeClose"></div>

  </div>
</template>

<script>
import vHeader from '@/components/Header.vue';
import { Resource } from '@/services/resource';
import qrcodeVue from 'qrcode-vue';
import { MessageBox, Toast } from 'mint-ui';
import imgSuncar from '@/assets/images/suncar.png';

export default {
  name: 'order',
  components: {
    vHeader,
    qrcodeVue
  },
  props: {
    title: {
      type: String,
      default: '标题'
    }
  },
  data() {
    return {
      size: 80,
      bgColor: '#fff',
      fgColor: '#000',
      value: 'https://github.com/l-ll/qrcode-vue',
      logo: imgSuncar,
      qcodeClose: true,
      active: 'tab-container1',
      noUseList: [],
      usingList: [],
      tkList: []
    };
  },
  mounted() {
    this.getOrderList();
  },
  methods: {
    // 弹窗二维码
    showQode(code_qr) {
      this.value = code_qr;
      this.qcodeClose = false;
    },
    // 关闭弹窗
    closeQode() {
      this.qcodeClose = true;
    },
    // 加载更多数据
    loadTop() {
      console.log('下拉刷新');
      var that = this;
      this.getOrderList().then(res => {
        console.log(res);
        Toast({ message: '更新成功', position: 'bottom' });
        if (this.active === 'tab-container1') {
          that.$refs.loadmore1.onTopLoaded();
        } else if (this.active === 'tab-container2') {
          that.$refs.loadmore2.onTopLoaded();
        } else if (this.active === 'tab-container3') {
          that.$refs.loadmore3.onTopLoaded();
        }
      });
    },
    // 获取订单列表
    getOrderList() {
      return Resource.getOrderList.post({}, {}).then(res => {
        let list = res.list || [];
        if (list.length > 0) {
          this.noUseList = list.filter(item => item.status === '1' || item.status === '6');
          this.usingList = list.filter(item => item.status === '5');
          this.tkList = list.filter(item => item.status === '7');
          console.log(this.noUseList);
        }
        return res;
      });
    },
    // 返回上一页
    goBack() {
      this.$router.go(-1);
    },
    hoverClick(indx) {
      this.active = indx;
    },
    //  退款
    orderTk(orderId) {
      const msgBox = MessageBox({
        title: '提示',
        message: '是否确认发起退款？',
        showCancelButton: true
      });
      msgBox.then(action => {
        if (action === 'confirm') {
          Resource.refundOrder.post({}, { orderId }).then(() => {
            MessageBox.alert(
              '<span style="text-align:center;display:inline-block;word-break:break-word;">尊敬的用户，您已退款成功！<br/>款项将于三个工作日内原路径返还，如有疑问请咨询客服热线<a href="tel:4008801768" style="color:#E40429">4008801768-3</a></span>'
            ).then(action => {
              if (action === 'confirm') {
                this.active = 'tab-container3';
              }
            });
          });
        }
      });
    }
  }
};
</script>

<style lang="less" scoped>
@import url('./order.less');
</style>
